<template>
  <div>
    <div>
        <div id="container"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  lanzhou_fulljson,
  lanzhoujson,
} from "../../../../assets/js/map_js/lanzhou.js";
export default {
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      this.getMap();
    });
  },
  methods: {
    getMap() {
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom);
      var app = {};

      var option;
      // 兰州市地图jSon
      // var ROOT_PATH = this.isshow
      //   ? "https://geo.datav.aliyun.com/areas_v3/bound/620100.json"
      //   : "https://geo.datav.aliyun.com/areas_v3/bound/620100_full.json";

      //
      var geoJson = this.isshow ? lanzhoujson : lanzhou_fulljson;

      myChart.showLoading();
      // $.get(ROOT_PATH, function (geoJson) {
      myChart.hideLoading();
      console.log(geoJson, "geoJson");
      echarts.registerMap("LanZhou", geoJson);
      myChart.setOption(
        (option = {
          //地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
          geo: {
            show: true,
            map: "LanZhou",
            roam: false,
            itemStyle: {
              normal: {
                shadowColor: "rgba(0, 0, 0, 0.8)",
                shadowBlur: 6,
                shadowOffsetX: -5,
                shadowOffsetY: 10,
              },
            },
          },

          series: [
            {
              type: "map",
              map: "LanZhou",
              label: {
                show: true,
                fontFamily: " Microsoft YaHei",
                fontSize: 15,
                color: "#000",
                rotate: -35,
                // https://echarts.apache.org/zh/option.html#geo.label.rich
              },

              itemStyle: {
                //每一块区域的样式
                areaColor: "#027FF8",
                borderColor: "#9FCFFD",
                borderWidth: 2,
              },
              emphasis: {
                disabled: true, //取消鼠标经过高亮
              },
              silent: true, //取消点击高亮
              // data: [
              //   {
              //     name: "##区",
              //     value: 1,
              //   },
              // ],
            },
          ],
        })
      );
      // });

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
    },
  },
};
</script>

<style scoped>

#container {
  transform: rotate(-35deg);
  width: 100%;
  height: 300px;
  font-weight: bold;
}
</style>